<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" @click="openTaskDialog">Add Task</el-button>
    <el-dialog
      title="Add Task"
      :visible.sync="taskDialogVisible"
      width="35%"
      @close="resetNewTask"
    >
      <el-form :model="newTask" label-width="85px">
        <!-- 任务标题 -->
        <el-form-item label="Task Title">
          <el-input v-model="newTask.name" placeholder="Please enter the task title" maxlength="50" show-word-limit />
        </el-form-item>

        <!-- 开始时间 -->
        <el-form-item label="Start Time">
          <el-date-picker
            v-model="newTask.startTime"
            type="datetime"
            placeholder="Please select a start time "
            format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>

        <!-- 截止时间 -->
        <el-form-item label="Deadline">
          <el-date-picker
            v-model="newTask.endTime"
            type="datetime"
            placeholder="Please select a deadline"
            format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>

        <!-- 任务等级 -->
        <el-form-item label="Level">
          <el-radio-group v-model="newTask.priority">
            <el-radio :label="3">major</el-radio>
            <el-radio :label="2">minor</el-radio>
            <el-radio :label="1">common</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 任务详情 -->
        <el-form-item label="Task Detail">
          <el-input
            type="textarea"
            v-model="newTask.details"
            placeholder="Please enter task details..."
            :rows="4"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="taskDialogVisible = false">cancle</el-button>
        <el-button type="primary" @click="confirmAddTask">add Task</el-button>
      </span>
    </el-dialog>
  </div>
</template>

  
<script>
  export default {
    data() {
      return {
        taskDialogVisible: false,
        newTask: {
          id: -1,
          name: "",
          startTime: null,
          endTime: null,
          priority: 3, // 默认等级
          details: "",
          status: 0, 
        },
      };
    },
    props: {
      selectedDate: {
        type: String,
        required: true,
      },
    },
    methods: {
      openTaskDialog() {
        this.newTask.startTime = this.selectedDate + " 00:00:00";   // 开始时间
        this.newTask.endTime = this.selectedDate + " 23:59:00";  // 截止时间
        this.taskDialogVisible = true;
      },
      resetNewTask() {
        // 重置任务信息
        this.newTask = {
          id: -1,
          name: "",
          startTime: null,
          endTime: null,
          priority: 3,
          details: "",
          status: 0,
        };
      },
      confirmAddTask() {
        if (!this.newTask.name.trim()) {
          this.$message.error("Task name cannot be empty!");
          return;
        }
        if (!this.newTask.startTime || !this.newTask.endTime) {
          this.$message.error("Please select start and end time!");
          return;
        }
        if (new Date(this.newTask.startTime) > new Date(this.newTask.endTime)) {
          this.$message.error("Start time cannot be later than end time!");
          return;
        }
        // 输入合法，触发添加任务事件
        this.newTask.startTime = new Date(this.newTask.startTime).toLocaleString();
        this.newTask.endTime = new Date(this.newTask.endTime).toLocaleString();

        // 提供id 由时间加四位随机数组成
        let now = parseInt(new Date().getTime() / 1000);
        this.newTask.id = now + Math.floor(Math.random() * 10000);
        this.$emit("task-added", { ...this.newTask });
        this.taskDialogVisible = false;
        this.resetNewTask();
      },
    },
  };
</script>

  
<style scoped>
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog) {
    border-radius: 15px; 
  }
</style>
  